<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header">Danh sách đại lý/cửa hàng trong khu vực</h3>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
             <div class="panel-heading">
                 <div class="row">
                     <div class="col-lg-3">
                         <a href="<?php echo $this->baseUrl().'/kinhdoanh/agent/add'?>">Thêm đại lý/cửa hàng vào khu vực</a>
                     </div>
                 </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3">                        
                    </div>
                </div>
                <div class="table-reponsive">
                    <div id="jqxgrid">                        
                    </div>
                </div>
        </div>
    </div>
</div>
<script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'id',type:'int'},
                    { name: 'name', type: 'string' },     
                    { name: 'address', type: 'string' },
                    { name:'province_name',type:'string'},
                    { name:'district_name',type:'string'},
                    { name:'agent_category_name',type:'string'}
                ],
                url: "<?php echo $this->baseUrl().'/kinhdoanh/agent/service' ?>",
                sortcolumn: 'province_name',
                sortdirection: 'asc'
            };
         var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            $("#jqxgrid").jqxDataTable(
            {
                source: dataAdapter,
                theme:'bootstrap',
                pageable: true,
                altRows: true,
                sortable: false,   
                filterable:true,
                width: '100%',                
                ready: function () {
                    $("#jqxgrid").jqxDataTable('hideColumn', 'id');
                },
                columns: [ 
                  { text: 'id',filterable:false,hidden:true,dataField:'id',cellsalgin:'right',width:0},
                  { text: 'Tên đại lý',hidden:false,dataField:'name',cellsalgin:'right',width:'20%'},
                  { text: 'Địa chỉ',hidden:false,dataField:'address',cellsalgin:'right',width:'25%'},
                  { text: 'Tỉnh thành',hidden:false,editable: false, dataField: 'province_name', width: '15%' },
                  { text: 'Quận huyện', editable: false, dataField: 'district_name', width:'15%' ,cellsFormat:'dd/MM/yyyy'},
                  { text: 'Loại đại lý', editable: false, dataField: 'agent_category_name', width:'15%' },
                  {
                    text: 'Sửa', cellsAlign: 'center', align: "center", width:'10%' ,columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          editrow = row;
                          var dataRecord = $("#jqxgrid").jqxDataTable('getRows');
                          if(dataRecord[editrow]['id']===null){
                              url="";
                              return url;
                          } else {
                               var url= "<div style='overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: center; margin-right: 2px; margin-left: 4px; margin-top: 4px;'><a class='fa fa-edit fa-lg'";
                               url = url + "href='<?php echo $this->baseUrl()?>/kinhdoanh/agent/edit/id/"+dataRecord[editrow]['id']+"'></a></div>";
                               return url;
                          }
                      }
                  }
                ]
            });
           
        });
    </script>